<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>图表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script type="text/javascript" src="js/config.js"></script>
    <script type="text/javascript">

        LAMJS.main(function() {
            'use strict';
            var System = this;
            System.Loadcommon
                    .load({
                        'baseUrl':'',
                        'suffix':'.css',
                        'rel':'stylesheet',
                        'css':[
                            'css/bootstrap',//Loading Bootstrap
                            //Loading Stylesheets
                            'css/font-awesome',
                            'css/style',

                            'css/custom',//Loading Custom Stylesheets
                            'css/odometer-theme-car',//里程表
                            'css/font-awesome',
                            'css/minoral',
                            'plugins/weather/css/style',
                            'css/lhh_lib'
                        ]
                    }).print();


        });
    </script>





</head>
<body class="content">
<div class="row _lhh_breadcrumb MB10 visible-lg">
    <ul class="breadcrumb pull-left">
        <li><a href="index.html">首页</a></li>
        <li class="active">当日电量</li>
    </ul>
    <div class="p-rel">
        <div class="_lhh_breadcrumb-more MR15">
            <!--电子时钟 begin-->
            <include file="./include/clock.html" dataType="html"></include>
            <!--电子时钟 end-->
        </div>
    </div>

</div>

<div class="row">
    <div class="col-mod-12">

        <h3 class="page-header"><i class="fa fa fa-dashboard"></i> Dashboard <i class="fa fa-info-circle animated bounceInDown show-info"></i> </h3>



    </div>
</div>

<div class="row cards">

    <div class="card-container col-lg-3 col-md-6 col-sm-12">
        <div class="card card-red hover">
            <div class="front">
                <h1>New Users</h1>

                <p id="users-count">0</p>
                            <span class="fa-stack fa-2x pull-right">
                            <i class="fa fa-circle fa-stack-2x"></i>
                            <i class="fa fa-user fa-stack-1x"></i>
                            <span class="easypiechart" data-percent="100" data-line-width="4" data-size="80"
                                  data-line-cap="butt" data-animate="2000" data-target="#users-count" data-update="3000"
                                  data-bar-color="white" data-scale-color="false"
                                  data-track-color="rgba(0, 0, 0, 0.15)"></span>
                            </span>
            </div>
            <div class="back">
                <ul class="inline divided">
                    <li>
                        <h1>Total Users</h1>

                        <p>3541</p>
                    </li>
                    <li>
                        <h1>Last Month</h1>

                        <p>698</p>
                    </li>
                </ul>
                <div class="summary negative">13% <i class="fa fa-arrow-down"></i> this month</div>

            </div>
        </div>
    </div>
    <div class="card-container col-lg-3 col-md-6 col-sm-12">
        <div class="card card-cyan hover">
            <div class="front">
                <h1>New Orders</h1>
                <p id="orders-count">0</p>
                                <span class="fa-stack fa-2x pull-right">
                                  <i class="fa fa-circle fa-stack-2x"></i>
                                  <i class="fa fa-shopping-cart fa-stack-1x"></i>
                                  <span class="easypiechart" data-percent="55" data-line-width="4" data-size="80" data-line-cap="butt" data-animate="2000" data-target="#orders-count" data-update="3000" data-bar-color="white" data-scale-color="false" data-track-color="rgba(0, 0, 0, 0.15)"></span>
                                </span>
            </div>
            <div class="back">
                <ul class="inline divided">
                    <li>
                        <h1>Total Orders</h1>
                        <p>842</p>
                    </li>
                    <li>
                        <h1>Last Month</h1>
                        <p>151</p>
                    </li>
                </ul>
                <div class="summary positive">6% <i class="fa fa-arrow-up"></i> this month</div>

            </div>
        </div>
    </div>
    <div class="card-container col-lg-3 col-md-6 col-sm-12">
        <div class="card card-green hover">
            <div class="front">
                <h1>Sales</h1>
                <p id="sales-count">0</p>
                                <span class="fa-stack fa-2x pull-right">
                                  <i class="fa fa-circle fa-stack-2x"></i>
                                  <i class="fa fa-usd fa-stack-1x"></i>
                                  <span class="easypiechart" data-percent="30" data-line-width="4" data-size="80" data-line-cap="butt" data-animate="2000" data-target="#sales-count" data-update="3000" data-bar-color="white" data-scale-color="false" data-track-color="rgba(0, 0, 0, 0.15)"></span>
                                </span>
            </div>
            <div class="back">
                <ul class="inline divided">
                    <li>
                        <h1>Total Sales</h1>
                        <p>25,165</p>
                    </li>
                    <li>
                        <h1>Last Month</h1>
                        <p>3,154</p>
                    </li>
                </ul>
                <div class="summary positive">18% <i class="fa fa-arrow-up"></i> this month</div>

            </div>
        </div>
    </div>
    <div class="card-container col-lg-3 col-md-6 col-sm-12">
        <div class="card card-orange hover">
            <div class="front">
                <h1>Visits</h1>
                <p id="visits-count">0</p>
                                <span class="fa-stack fa-2x pull-right">
                                  <i class="fa fa-circle fa-stack-2x"></i>
                                  <i class="fa fa-eye fa-stack-1x"></i>
                                  <span class="easypiechart" data-percent="90" data-line-width="4" data-size="80" data-line-cap="butt" data-animate="2000" data-target="#visits-count" data-update="3000" data-bar-color="white" data-scale-color="false" data-track-color="rgba(0, 0, 0, 0.15)"></span>
                                </span>
            </div>
            <div class="back">
                <ul class="inline divided">
                    <li>
                        <h1>Total Visits</h1>
                        <p>48,694</p>
                    </li>
                    <li>
                        <h1>Last Month</h1>
                        <p>9,514</p>
                    </li>
                </ul>
                <div class="summary negative">2% <i class="fa fa-arrow-down"></i> this month</div>

            </div>
        </div>
    </div>
</div>

<div class="row MB30">
    <!-- Discrete Bar Chart -->
    <div class="col-md-12">
        <div class="echarts" style="height: 400px;width:100%;" id="echarts-column-chart"></div>
    </div>
</div>

<div class="row" style="margin-bottom: 50px;">

    <div class="col-md-6 MB10">
        <div class="P20 PR0">
            <div class="P10 MR10 _lhh_bg-grey">
                <div id="calendar"></div>
            </div>

        </div>

    </div>
    <!-- Pie chart -->
    <div class="col-md-6">
        <div class="P20 PL0">
            <!--天气-->
            <div class="row MB10">
                <div class="col-md-12">
                    <div class="weather-box widget-body  yellow">
                        <div class="weather-day">
                            <span>21</span>
                            <p>星期四</p>
                        </div>

                        <div class="weather-icon">
                            <canvas id="rain" width="64" height="64"></canvas>
                            <p>ABU DHABI</p>
                        </div>
                    </div>
                </div>

            </div>
            <div class="row holder" id="donuts-holder">
                <div class="col-md-6">
                    <h4 class="_lhh_title MB10">今日综合效率</h4>
                    <div id="donut"></div>
                </div>
                <div class="col-md-6">
                    <h4 class="_lhh_title MB10">年计划完成率</h4>
                    <div id="coloredDonut"></div>
                </div>
            </div>
        </div>

    </div>
</div>

</body>

<script type="text/javascript">

    LAMJS.main(function() {
        'use strict';
        var System = this;

        System.import([
                        //Load JS here for Faster site load
                        "/init",
                        "/raphael-min",
                        "/morris-0.4.3.min",
                        "/morris-custom",

                        "charts/jquery.sparkline.min",

                        // Page Scripts
                        "/fullcalendar.min",
                        "/fullcalendar-custom",

                        "/dashboard-custom",

                        // ECharts
    //                        "/highcharts.src",
                        "/highstock",

                        // jquery.sparkline
                        "/jquery.sparkline/jquery.sparkline.min",
                        "/jquery.sparkline/sparkline-script",

                        "/jquery.easypiechart.min",
                        "/jquery.animateNumbers"
                    ],'./js')
                .import([ "/weather/js/skycons"],plugins);


    });
</script>

<script type="text/javascript">
    LAMJS.run(function(){
        'use strict';
        var System=this;
        System.use();
        System.Html.include($('include'));
        var I=System.modules.exports.I;

        function highstock(){
            var seriesOptions = [],
                    seriesCounter = 0,
                    names = ['MSFT', 'AAPL'];
            $.each(names, function (i, name) {

                $.getJSON('http://www.hcharts.cn/datas/jsonp.php?filename=' + name.toLowerCase() + '-c.json&callback=?',    function (data) {

                    seriesOptions[i] = {
                        name: name,
                        data: data
                    };

                    switch(i)
                    {
                        case 0:
                            seriesOptions[i].color='blue';
                            break;
                        case 1:
                            seriesOptions[i].color='red';
                            break;
                        default:

                    }

                    // As we're loading the data asynchronously, we don't know what order it will arrive. So
                    // we keep a counter and create the chart when all the data is loaded.
                    seriesCounter += 1;

                    if (seriesCounter === names.length) {
                        I.home.highstock($('#echarts-column-chart'),{'series':seriesOptions});
                    }
                });
            });

        }




        $(function(){
            I.home.odometer(445514);
            I.home.flip();
            I.home.rain("rain");


        });

        $(window).resize(function() {
            highstock();
            initDonut();
        }).trigger('resize');



    });




</script>

</html>